/**
* 系统管理 菜单管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 主体内容 -->
    <el-row>
      <!-- title -->
      <div class="modt-box">菜单管理</div>
      <el-col :span="4"></el-col>
      <el-col :span="6">
        <div class="mod-btnbox">
          <el-button size="small" type="primary">全部展开</el-button>
          <el-button size="small" type="primary">全部压缩</el-button>
        </div>
        <el-tree class="treeClass"
                 ref="menuTree"
                 :data="treeData"
                 show-checkbox="true"
                 default-expand-all="true"
                 highlight-current="true"
                 :props="defaultProps"
                 @node-click="nodeClick"
                 @check-change="handleClick"
                 node-key="id">
        </el-tree>
      </el-col>
      <el-col :span="12" style="margin-left: 20%;">
        <div class="mod-btnbox">
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addMenu">添加</el-button>
        </div>
        <el-form ref="menuForm" :model="menuForm" label-width="80px" :rules="rules">
              <el-form-item label="父级菜单" prop="parentId">
                <tree-select :data="treeData"
                             v-model="menuForm.parentId"
                             :defaultProps="defaultProps"
                             :nodeKey="nodeKey"
                             :checkedKeys="defaultCheckedKeys"
                             @popoverHide="popoverHide"></tree-select>
              </el-form-item>
          <el-form-item label="名称" prop="menuName">
            <el-input size="small" v-model="menuForm.menuName"></el-input>
          </el-form-item>
          <el-form-item label="图标" prop="icon">
            <el-input size="small" v-model="menuForm.icon"></el-input>
          </el-form-item>
          <el-form-item label="链接地址" prop="url">
            <el-input size="small" v-model="menuForm.url"></el-input>
          </el-form-item>
          <el-form-item label="层级" prop="level">
            <el-input size="small" v-model="menuForm.level"></el-input>
          </el-form-item>
          <el-form-item label="叶子节点" prop="leaf" class="selectw">
            <el-select size="small" v-model="menuForm.leaf" placeholder="请选择">
              <el-option
                v-for="item in leafList"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单类型">
            <el-radio-group size="small" v-model="menuForm.type">
              <el-radio border :label="1">WEB</el-radio>
              <el-radio border :label="2">SYS</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="顺序" prop="sort">
            <el-input size="small" v-model="menuForm.sort"></el-input>
          </el-form-item>
          <el-form-item label="描述" prop="description">
            <el-input size="small" v-model="menuForm.description"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button size="small" type="primary" @click="saveMenu('menuForm')">保存</el-button>
            <el-button size="small" type="primary" v-show="showDelete" @click="deleteMenu">删除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {menuDelete, menuGet, menuSave, menuTree} from '../../api/menuMG'
  import TreeSelect from '@/components/selectTree.vue';
  export default {
    components: { TreeSelect},
    data() {
      return {
        //叶子节点
        leafList: [{
          value: true,
          label: '是'
        }, {
          value: false,
          label: '否'
        }],
        showDelete: false,
        treeData: [],
        defaultProps: {
          label: 'menuName',
          children: 'children'
        },
        nodeKey: 'id',
        defaultCheckedKeys: [],
        //定义菜单表单
        menuForm: {
          id: '',
          menuName: '',
          parentId: '',
          level: '',
          leaf: '',
          icon: '',
          sort: '',
          url: '',
          description: ''
        },
        // rules表单验证
        rules: {
          parentId: [
            {required: true, message: '请选择父级菜单', trigger: 'blur'}
          ],
          name: [
            {required: true, message: '请输入菜单名称', trigger: 'blur'}
          ]
        }
      }
    },
    /**
     * 创建完毕
     */
    created() {
      this.getData();
    },
    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      // 获取数据
      getData() {
        menuTree().then(res => {
          if (res.success === true) {
            this.loading = false;
            this.treeData = res.data;
          }
        }).catch(err => {
          this.loading = false;
          this.$message.error('数据加载失败，请稍后再试！')
        })
      },
      // 添加
      addMenu() {
        this.showDelete = false
        this.menuForm.id = ''
        this.menuForm.parentId = ''
        this.menuForm.menuName = ''
        this.menuForm.level = ''
        this.menuForm.leaf = ''
        this.menuForm.url = ''
        this.menuForm.sort = ''
        this.menuForm.icon = ''
        this.menuForm.description = ''
      },
      // 复选变单选
      handleClick(data, checked, node) {
        if (checked) {
          this.$refs.menuTree.setCheckedNodes([]);
          this.$refs.menuTree.setCheckedNodes([data]);
          this.showDelete = true;
        } else {
        }
      },
      // 点击节点
      nodeClick(arr, node, self) {
        menuGet(arr.id).then(res => {
          this.menuForm = res.data;
          this.$refs.menuTree.setCheckedNodes([]);
          this.$refs.menuTree.setCheckedNodes([arr]);
        }).catch(err => {
          this.loading = false;
          this.$message.error('菜单获取失败，请稍后再试！')
        })
      },
      // 保存菜单
      saveMenu(editData) {
        this.$refs[editData].validate(valid => {
          debugger;
          if (valid) {
            menuSave(this.menuForm).then(res => {
              debugger;
              this.getData();
              this.$message.success(res.message)
            }).catch(err => {
              this.$message.error('保存失败，请稍后再试！')
            })
          } else {
            return false
          }
        })
      },
      // 删除菜单
      deleteMenu() {
        menuDelete(this.menuForm.id).then(res => {
          this.getData();
          this.$message.success(res.message)
        }).catch(err => {
          this.$message.error('删除失败，请稍后再试！')
        })
      }
    }
  }
</script>

<style>
  .user-search td {
    margin-top: 20px !important;
  }

  .modt-box {
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: #f0f2f5;
    text-align: center;
    color: #334157;
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 24px;
  }

  .mod-btnbox {
    margin-bottom: 20px;
  }

  .treeClass {
    border: 1px solid #f3f3f3;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .selectw {
    width: 100%;
  }
</style>
 
